<template>
	<div class="content">
  <themeHeader title="收货地址"></themeHeader>
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-name"></i></div>
          <div class="item-inner">
            <div class="item-title label">收货人姓名:</div>
            <div class="item-input">
              <input class="add-name" type="text">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-number"></i></div>
          <div class="item-inner">
            <div class="item-title label">手机号码:</div>
            <div class="item-input">
              <input class="add-phone" type="number">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-number"></i></div>
          <div class="item-inner">
            <div class="item-title label">固定电话(选填):</div>
            <div class="item-input">
              <input class="add-phone2" type="number">
            </div>
          </div>
        </div>
      </li>
      <!-- <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-password"></i></div>
          <div class="item-inner">
            <div class="item-title label">区域选择</div>
            <div class="item-input">
              <input type="text" id='city-picker'/>
            </div>
          </div>
        </div>
      </li> -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-password"></i></div>
          <div class="item-inner">
            <div class="item-title label">详细地址</div>
            <div class="item-input">
              <input class="place" type="area"/>
            </div>
          </div>
        </div>
      </li>
      <!-- <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-password"></i></div>
          <div class="item-inner">
            <div class="item-title label">家庭/公司</div>
            <div class="item-input">
              <input type="area" class="">
            </div>
          </div>
        </div>
      </li> -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-toggle"></i></div>
          <div class="item-inner">
            <div class="item-title label">设为默认收货地址</div>
            <div class="item-input">
              <label class="label-switch">
                <input type="checkbox" v-model="defaultAdd">
                <div class="checkbox"></div>
              </label>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="add-block content-block">
    <div class="row">
     <div class="address-btn login-button-p"><span class="button button-success">添加地址</span></div>
    </div>
  </div>
</div>
</template>
<style type="text/css">
  .add-block{
    text-align: center;
  }
  .address-btn{
    margin-left: 32%;
  }
</style>
<script type="text/javascript">
import ThemeHeader from "../pages/home/component/themeHeader.vue";
	export default {
    data(){
      return{
        defaultAdd:false,
      }
    },
    mounted(){
      var $name = $(".add-name");
      var $phone = $(".add-phone");
      var $phone2 = $(".add-phone2");
      var $place = $(".place");
      var $btn = $(".address-btn");
      var bol = false;
      $btn.on("click",function () {
        if (bol) {
          alert("已存在");
          return;
        }
        if ($name.val()==""||$phone.val()==""||$place.val()=="") {
          alert("请输入完整信息");
          return;
        }
        if ($phone.val().length != 11) {
          alert("号码长度为11位");
          return;
        }

        var defaultAdd1=this.defaultAdd==true?1:0;
        $.ajax({
          type:"post",
          url:"http://localhost:8088/shop2/add-addressp.php",
          data:{type:"add",name:$name.val(),phone:$phone.val(),phone2:$phone2.val(),place:$place.val(),defaultAdd:defaultAdd1},
          dataType:"json",
          success:function(data){
            console.log(data);
            if (data.bol) {
              alert("添加成功");
              window.location.href="address#/address";
            }else{
              alert("添加失败");
            }
          },
          error:function(){
            console.log(this);
            alert("添加失败11");
          }
        })
      })
		},
    components:{
      ThemeHeader
    }
  }
	
</script>